import React from 'react';
import { Modal, Button } from 'antd';
import { jsPDF as JsPDF } from 'jspdf';
// import html2canvas from 'html2canvas';
import 'jspdf-autotable';
import myFont from './myzt-normal';
import styles from '../index.less';

const IndexModal = (props) => {
  const {
    visible, indexTitle, onCancel,
  } = props;

  const cancelIndexModal = () => {
    onCancel();
  };

  const downloadPdf = () => {
    const doc = new JsPDF('p', 'pt'); // 获取实例
    const res = doc.autoTableHtmlToJson(document.getElementById('indexTable'));
    // 设置中文字体
    doc.addFileToVFS('ok.ttf', myFont);
    doc.addFont('ok.ttf', 'myFont', 'normal');
    doc.setFont('myFont');

    doc.autoTable({
      styles: {
        fillColor: [255, 255, 255], font: 'myFont', textColor: [0, 0, 0], halign: 'left', fontSize: 12,
      },
      headStyles: { lineWidth: 1, halign: 'center' },
      columnStyles: {
        0: { valign: 'middle', cellWidth: 50 },
        1: { valign: 'middle', cellWidth: 50 },
        2: { valign: 'middle' },
        3: { valign: 'middle', cellWidth: 200 },
        4: { valign: 'middle', minCellWidth: 30 }, // 第4列居中,宽度最小30
      },
      theme: 'grid', // 主题
      startY: 80, // 距离上边的距离
      margin: 20, // 距离左右边的距离
      body: res.data, // 表格内容
      columns: [ // 表头
        { header: '类', dataKey: 'lei' },
        { header: '指标1', dataKey: 'zhibiao1' },
        { header: '指标2', dataKey: 'zhibiao2' },
        { header: '指标3', dataKey: 'zhibiao3' },
        { header: '指标4', dataKey: 'zhibiao4' },
      ],
    });

    const pageWidth = doc.getPageWidth(); // A4纸:595.28
    const x1 = (pageWidth - doc.getTextWidth(indexTitle)) / 2;
    // const x2 = (pageWidth - doc.getTextWidth(`总分：${score}`)) / 1.8;
    // const scoreLength = `总分：${score}`.length;
    // const unitWidth = doc.getStringUnitWidth(`总分：${score}`);
    // const x2 = (pageWidth - unitWidth * scoreLength) / 2;
    doc.text(x1, 40, indexTitle); // x坐标,y坐标,文字
    doc.setFontSize(12);// 设置文字大小,下一行起有效
    doc.text(20, 60, `总分:${score}`);

    doc.save(`${indexTitle}-指数.pdf`);
  };

  // 转换成图片形式的pdf
  // const downloadPdf2 = () => {
  //   const printHtml = document.getElementById('myIndexPage');
  //   html2canvas(printHtml).then((canvas) => {
  //     const contentWidth = canvas.width;
  //     const contentHeight = canvas.height;
  //     // 一页pdf显示html页面生成的canvas高度;
  //     const pageHeight = contentWidth / 592.28 * 841.89;
  //     // 未生成pdf的html页面高度
  //     let leftHeight = contentHeight;
  //     // 页面偏移
  //     let position = 0;
  //     // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
  //     const imgWidth = 595.28;
  //     const imgHeight = 592.28 / contentWidth * contentHeight;

  //     const pageData = canvas.toDataURL('image/jpeg', 1.0);

  //     const pdf = new JsPDF('', 'pt', 'a4'); // 纵向方向p，单位pt|mm， 格式a4

  //     // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
  //     // 当内容未超过pdf一页显示的范围，无需分页
  //     if (leftHeight < pageHeight) {
  //       pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
  //     } else {
  //       while (leftHeight > 0) {
  //         pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
  //         leftHeight -= pageHeight;
  //         position -= 841.89;
  //         // 避免添加空白页
  //         if (leftHeight > 0) {
  //           pdf.addPage();
  //         }
  //       }
  //     }
  //     pdf.save('ok.pdf');
  //   });
  // };

  const modalTitle = (
    <div className={styles.modalTitle}>
      <span>页面标题--巴拉巴拉</span>
      <Button type="primary" onClick={downloadPdf} className={styles.btnPDF}>导出PDF</Button>
    </div>
  );
  return (
    <Modal
      title={modalTitle}
      visible={visible}
      width="80%"
      maskClosable={false}
      onCancel={cancelIndexModal}
      footer={null}
    >
      <div id="myIndexPage">
        <p style={{ textAlign: 'center', fontWeight: 'bold' }}>{indexTitle}</p>
        <p>总分：{score}</p>
        <table id="indexTable" border="1" cellPadding="10" style={{ width: '100%' }}>
          <thead>
            <tr>
              <th style={{ width: '10%', textAlign: 'center' }}>表头1</th>
              <th style={{ width: '10%', textAlign: 'center' }}>表头2</th>
            </tr>
          </thead>
          <tbody>
             内容.......
          </tbody>
        </table>
      </div>

    </Modal>
  );
};

export default IndexModal;
